<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
    	<span class="title">检索管理</span>
    	<div class="body">
    		<span>年级:</span>
        <select class="select" v-model="gradeSelect" @change="getClassData()" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>班级:</span>
        <select class="select" v-model="classSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in classOption" :label="item" :value="item"></option>
        </select>
    		<el-button type="primary" @click="getTableData" size="small">确认</el-button>
        <el-button type="primary" @click="clearSelect" size="small">重置</el-button>
    	</div>
    </div>

    <div class="model select">
      <img :src="IMGBASE64.XIAOCHEGEBANRENSHU2X" class="pink">
    	<span class="title">学生选报站点</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="tableData">
  				<el-table-column prop="grade" label="年级" min-width="80" align="center"></el-table-column>
  				<el-table-column prop="clazz" label="班号" min-width="70" align="center"></el-table-column>
  				<el-table-column prop="id" label="学号" min-width="70" align="center"></el-table-column>
  				<el-table-column prop="studentName" label="姓名" min-width="100" align="center"></el-table-column>
  				<el-table-column label="路线名称" min-width="200">
  					<template scope="scope">
  						<el-select v-model="scope.row.line" placeholder="请选择" @change="changeLine(scope)" size="small">
						    <el-option
						      v-for="(item, key) in lineOption"
						      :label="item.lineName"
						      :value="item.lineId">
						    </el-option>
						  </el-select>
  					</template>
  				</el-table-column>
  				<el-table-column prop="station" label="上下车站点" min-width="170" align="center">
  					<template scope="scope">
  						<el-select v-model="scope.row.siteSelect" placeholder="请选择" size="small">
						    <el-option
						      v-for="(item, key) in siteOption"
						      :label="item"
						      :value="item">
						    </el-option>
						  </el-select>
  					</template>
  				</el-table-column>
  				<el-table-column prop="phone1" label="联系电话1" min-width="170" align="center">
  				</el-table-column>
  				<el-table-column prop="phone2" label="联系电话2" min-width="170" align="center">
  				</el-table-column>
  				<el-table-column prop="eat" label="周日饭堂就餐" min-width="150" align="center">
  					<template scope="scope">
  						<el-select v-model="scope.row.eatvalue" placeholder="请选择" size="small">
						    <el-option
						      v-for="item in eat"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
  					</template>
  				</el-table-column>
  			</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="10"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
    	</template>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      gradeSelect: null,
      gradeOption: [],
      classSelect: null,
      classOption: [],
      tableData: [],
      lineOption: [],
      line: null,
      siteSelect: null,
      siteOption: [],
      regionOption: [],
      total: 0,
      page: 1,
      paging: true,
      allSite: [],
      eat: [{
        value: '1',
        label: '是'
      },
      {
        value: '2',
        label: '否'
      }],
      tablemsg: []
    }
  },
  mounted () {
    this.getGradeData()
    this.getTableData()
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    getGradeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/namelist', {page: (this.page), rows: 20, grade: this.gradeSelect, clazz: this.classSelect}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.rows
          this.total = response.data.data.total
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].num = i + 1
            for (var j in this.gradeOption) {
              if (this.tableData[i].grade === j) {
                this.tableData[i].grade = this.gradeOption[j]
              }
            }
          }
          this.getLineOptionData()
          this.getSiteOptionData()
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getLineOptionData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/lineAndTeacher', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          for (var j = 0; j < this.tableData.length; j++) {
            this.$set(this.tableData[j], 'line', null)
          }
          this.lineOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSiteOptionData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/site/areaAndSite', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.allSite = response.data.data
          for (var i = 0; i < this.allSite.length; i++) {
            this.siteOption.push(this.allSite[i].siteName)
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearSelect () {
      this.gradeSelect = null
      this.classSelect = null
    },
    changeLine (scope) {
      this.siteOption = []
      for (var i = 0; i < this.allSite.length; i++) {
        if (scope.row.line === this.allSite[i].lineId) {
          this.siteOption.push(this.allSite[i].siteName)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
	.retrieval{
	  .body{
	    span{
	    	margin-left: 4%;
	    }
	    span:first-child{
	    	margin-left: 0;
	    }
	  }
	  .select{
	    width: 13%;
	    border: 0;
	    border-bottom: 1px solid #D7D7D7;
	    margin-right: 2%;
	  }
	}

</style>
